<template>
  <div>
    <!--地图-->
    <MapLayersMap :map="map" :dataTypeInfoArray="dataTypeInfoArray" :selectionData="selectionData" :layerInfoParams="layerDataQueryParams"
      :clearAllLayersBool="clearAllLayersBool" :showAllLayersBool="showAllLayersBool" :customStylesObj="customStylesObj"
      @getLegendHtml="getLegendHtml" @finishClearAll="finishClearAll" @setSelectData="setSelectData"
      @finishShowAll="finishShowAll"></MapLayersMap>
    <!--图层图例-->
    <div class="new-layerLegendDiv">
      <p @click="showHideLayerDiv">
        <template v-if="showHideLayerDivBool == false">
          <img title="打开图层选择" src="@/assets/map/image/newImage/layer.png">
          <span style="color:#3a385e;">图层</span>
        </template>
        <template v-else>
          <img title="关闭图层选择" src="@/assets/map/image/newImage/layer-r.png">
          <span style="color:var(--el-color-primary);">图层</span>
        </template>
      </p>
      <p class="new-layerLengendDiv-split"></p>
      <p @click="showHideLegendDiv">
        <template v-if="showHideLegendDivBool == false">
          <img title="打开图例" src="@/assets/map/image/newImage/legend.png">
          <span style="color:#3a385e;">图例</span>
        </template>
        <template v-else>
          <img title="关闭图例" src="@/assets/map/image/newImage/legend-r.png">
          <span style="color:var(--el-color-primary);">图例</span>
        </template>
      </p>
    </div>
    <!--图层选择-->
    <el-card v-if="showHideLayerDivBool" class="new-layerSelectDiv">
      <el-cascader v-model="layerSelectData" placeholder="请选择图层" :options="layerOptions" :props="layerProps"
        @change="chooseLayers" separator="," collapse-tags collapse-tags-tooltip clearable></el-cascader>
    </el-card>
    <!--图层图例-->
    <el-card v-if="showHideLegendDivBool" class="layerMap-legend">
      <!--滚动条-->
      <el-scrollbar max-height="500px">
        <p>图例</p><!--图例444-->
        <div v-if="legendInfoHtml && legendInfoHtml !== ''" v-html="legendInfoHtml"></div>
        <div v-for="item in layerShowHideArray" :key="item.name" v-show="item.show" v-html="item.legendHtml">
        </div>
      </el-scrollbar>
    </el-card>
  </div>
</template>
<script setup>
//地图
import MapLayersMap from '@/map/components/mapLayers/map.vue';

const props = defineProps({
  map: {//地图对象
    default: {},
    type: Object,
  },
  dataTypeInfoArray: {//图层数据类型数组
    default: [],
    type: Array,
  },
  layerInfoParams: {//查询图层数据参数
    default: {},
    type: Object,
  },
  legendInfoHtml: {//图例信息html
    default: "",
    type: String,
  },
  customStylesObj: {//自定义样式对象
    default: {},
    type: Object,
  },
  selectionData: {
    default: '',
    type: String
  }
});

const { map, dataTypeInfoArray, layerInfoParams, legendInfoArray, customStylesObj,selectionData } = toRefs(props);


const emits = defineEmits(['setSelectId', 'getLayerSelectData','changeSearch']);


const loading = ref(false);

//初始化数据
const data = reactive({
  layerDataQueryParams: {//查询图层信息参数（图层序号、图层名称、查询条件、是否显示）
    code: "",
    name: "",
    sqlText: '',
    show: false
  },
});
let {
  layerDataQueryParams,
} = toRefs(data);

//图层图例
const showHideLayerDivBool = ref(false);//是否显示图层选择面板
const showHideLegendDivBool = ref(false);//是否显示图例面板
//图层选择
const layerOptions = ref([]);
const layerProps = ref({ multiple: true });//图层选择--多选
const layerSelectData = ref(['烈度']);//图层选择内容
const layerShowHideArray = ref([]);//图层是否显示数组
const clearAllLayersBool = ref(false);//清除全部图层
const showAllLayersBool = ref(false);//显示全部图层

//图层数据类型数组
watch(() => props.dataTypeInfoArray, val => {
  if (val) {
    let array = [];
    let showHideArray = [];
    val.forEach((item, index) => {
      array.push({ value: item.name, label: item.name });
      showHideArray.push({ code: item.code, name: item.name, show: false, legendHtml: "" });
    });
    layerOptions.value = array;
    layerShowHideArray.value = showHideArray;
  }
}, { deep: true, immediate: true });

//图层查询参数
watch(() => props.layerInfoParams, val => {
  if (val) {
    layerDataQueryParams.value = val;
    let selectLayerNameArray = [];//勾选的图层名称数组
    if (val.showAllLayers) {//勾选显示全部图层
      let array = props.dataTypeInfoArray;
      if (array && array.length > 0) {
        for (let i = 0; i < array.length; i++) {
          let name = array[i].name;
          layerSelectData.value.push([name]);
          selectLayerNameArray.push([name]);
          if (showHideLayerDivBool.value == true) {//显示图层选择控件，刷新显示
            showHideLayerDivBool.value = false;//先隐藏
            setTimeout(function () {
              showHideLayerDivBool.value = true;//再显示，可刷新
            }, 100);
          }
        }
        //显示全部图层
        showAllLayersBool.value = true;
        //图层显示隐藏数组
        let showHideArray = layerShowHideArray.value;
        for (let i = 0; i < showHideArray.length; i++) {
          showHideArray[i].show = true;//显示
        }
        showHideLegendDivBool.value = true;//显示图例
      }
    } else {//勾选显示1个图层
      layerSelectData.value.push([val.name]);
      selectLayerNameArray.push([val.name]);
      if (showHideLayerDivBool.value == true) {//显示图层选择控件，刷新显示
        showHideLayerDivBool.value = false;//先隐藏
        setTimeout(function () {
          showHideLayerDivBool.value = true;//再显示，可刷新
        }, 100);
      }
      //图层显示隐藏数组
      let showHideArray = layerShowHideArray.value;
      for (let i = 0; i < showHideArray.length; i++) {
        if (showHideArray[i].name == val.name) {
          showHideArray[i].show = true;//显示
          showHideLegendDivBool.value = true;//显示图例
          break;
        }
      }
    }
    emits("getLayerSelectData", selectLayerNameArray);
  }
}, { deep: true, immediate: true });

//显示隐藏图层选择面板
function showHideLayerDiv() {
  if (showHideLayerDivBool.value) {
    showHideLayerDivBool.value = false;
  } else {
    showHideLayerDivBool.value = true;
  }
}

//显示隐藏图例面板
function showHideLegendDiv() {
  if (showHideLegendDivBool.value) {
    showHideLegendDivBool.value = false;//显示图例面板
  } else {
    showHideLegendDivBool.value = true;//隐藏图例面板
  }
}

//勾选图层事件
function chooseLayers() {
  let selectLayerNameArray = [];//勾选的图层名称数组
  let array = layerSelectData.value;
  // console.log("勾选图层事件");
  // console.log(array);
  emits("getLayerSelectData", array);
  if (array.length > 0) {
    for (let i = 0; i < array.length; i++) {
      let arr = array[i];
      let name = arr[0];
      if (arr.length == 2) {
        name = arr[1];
      }
      selectLayerNameArray.push(name);
    }
    //emits("openDataVersion",[selectLayerNameArray,'add']);
    //图层显示隐藏数组
    let showHideArray = layerShowHideArray.value;
    for (let i = 0; i < showHideArray.length; i++) {
      if (selectLayerNameArray.indexOf(showHideArray[i].name) == -1) {//未勾选
        if (showHideArray[i].show == true) {
          showHideArray[i].show = false;//隐藏
          layerDataQueryParams.value = {//查询图层信息参数（图层序号、图层名称、查询条件、是否显示）
            code: showHideArray[i].code,
            name: showHideArray[i].name,
            sqlText: '',
            show: false
          };
          break;
        }
      } else {//已勾选
        if (showHideArray[i].show == false) {
          showHideArray[i].show = true;//显示
          showHideLegendDivBool.value = true;//显示图例
          layerDataQueryParams.value = {//查询图层信息参数（图层序号、图层名称、查询条件、是否显示）
            code: showHideArray[i].code,
            name: showHideArray[i].name,
            sqlText: '',
            show: true
          };
          break;
        }
      }
    }
  } else {//清除全部图层
    clearAllLayersBool.value = true;
    //图层显示隐藏数组
    let showHideArray = layerShowHideArray.value;
    for (let i = 0; i < showHideArray.length; i++) {
      if (showHideArray[i].show == true) {
        showHideArray[i].show = false;//隐藏
      }
    }
  }
  console.log(layerSelectData.value)
  if(layerSelectData.value&&layerSelectData.value.length>0)
  emits('changeSearch',layerSelectData.value[layerSelectData.value.length-1][0])
}

//完成清除全部图层
const finishClearAll = (bool) => {
  if (bool) {
    clearAllLayersBool.value = false;
  }
}

//完成显示全部图层
const finishShowAll = (bool) => {
  if (bool) {
    showAllLayersBool.value = false;
  }
}

//图例
const getLegendHtml = (obj) => {
  //图层显示隐藏数组
  /*layerShowHideArray.value = [{
    name: obj.name,
    show: obj.show,
    legendHtml: obj.legendHtml
  }];*/
   let showHideArray = layerShowHideArray.value;
   for (let i = 0; i < showHideArray.length; i++) {
     if (showHideArray[i].name == obj.name) {
       showHideArray[i].legendHtml = obj.legendHtml;//显示图例
       break;
     }
   }
  showHideLegendDivBool.value = true
}

//设置选择数据ID
const setSelectData = (obj) => {
  emits("setSelectId", obj);
}

</script>
<style scoped lang="scss">
/*图层图例*/
.new-layerLegendDiv {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 54px;
  background: #fff;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid #707070;
  border-radius: 4px;
  cursor: pointer;
}

.new-layerLegendDiv p {
  padding: 10px;
  margin: 0px;
}

.new-layerLegendDiv p img {
  width: 25px;
  height: 25px;
  margin-left: 3px;
}

.new-layerLegendDiv p span {
  width: 32px;
  height: 21px;
  font-size: 14px;
  color: #3a385e;
  text-align: center;
  line-height: 24px;
  border: 0.5px solid #f5f5f5;
}

.new-layerLengendDiv-split {
  width: 32px !important;
  height: 1px !important;
  padding: 0px !important;
  margin: 0px !important;
  margin-left: 10px !important;
  border-top: 1px dashed #6f7ea8;
}

.new-layerSelectDiv {
  position: absolute;
  top: 20px;
  right: 80px;
}

.new-legendDiv {
  position: absolute;
  top: 140px;
  right: 70px;
  width: 256px;
  background: #fff;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
  border: 1px solid #707070;
  border-radius: 4px;
  padding: 5px;
}

.new-legendDiv div {
  position: relative;
  height: 16px;
  line-height: 16px;
  font-size: 13px;
  margin: 8px;
}

.new-legendDiv div span {
  line-height: 16px;
  font-size: 13px;
}

.new-legendDiv div div {
  position: relative;
  top: 2px;
  left: 8px;
  width: 30px;
  height: 14px;
  margin: 0px !important;
  margin-right: 25px !important;
  display: inline-block;
}

/*面*/
.new-legendDiv-polygon {
  position: relative !important;
  left: 0px !important;
  top: 0px !important;
  border: 1px solid black;
  background: #fff;
}

/*线*/
.new-legendDiv-line {
  position: relative !important;
  height: 5px !important;
  top: -4px !important;
  left: 0px !important;
}

/*点*/
.new-legendDiv-point {
  position: relative !important;
  left: 8px !important;
  top: 0px !important;
  height: 12px !important;
  width: 12px !important;
  border-radius: 10px !important;
}

.layerMap-legend {
  position: absolute;
  right: 20px;
  bottom: 10px;
  min-height: 50px;
  min-width: 200px;
}

.layerMap-legend p:first-child {
  text-align: center;
  font-weight: bold;
}</style>